define(['./../initial'], function() {
    var app = angular.module('App.prjStatus');
    app.factory('prjStatusTimeLineChart', ['$filter', '$rootScope',
        function($filter, $rootScope) {
            function initialChart(chartId, data) {
                var oChartId = chartId;
                chartId = "#" + chartId;
                var chart = $(chartId).highcharts();
                if (chart) {
                    chart.destroy();
                }
                var initialWidth = document.documentElement.clientWidth; //初始的宽度

                var mainDatas = [],
                    allDatas = [],
                    subDatas = []; //对于一组同title的工况节点,第一个节点是主节点,之后的是次节点

                data.forEach(function(status) {
                    var arr = status.subItems.map(function(subItem, subIndex) {
                        return {
                            statusTime: subItem.endTime.toString(),
                            x: Date.parse(subItem.endTime.replace(/-/g, '/')),
                            y: 0,
                            info: subItem.title,
                            isMain: subIndex === 0 ? true : false,
                            show: true,
                            marker: {
                                lineColor: "#fff",
                                fillColor: subIndex === 0 ? "#CD3E18" : "#3779C1",
                                enabled: true,
                                symbol: 'circle',
                                lineWidth: 3,
                                radius: 8,
                                states: {
                                    hover: {
                                        enabled: true,
                                        radius: 10,
                                        lineWidth: 3,
                                        lineColor: "#fff",
                                        fillColor: subIndex === 0 ? "#CD3E18" : "#3779C1",
                                    },
                                    select: {
                                        enabled: true,
                                        radius: 10,
                                        lineWidth: 3,
                                        lineColor: "#fff",
                                        fillColor: subIndex === 0 ? "#CD3E18" : "#3779C1",
                                    }
                                }
                            }
                        };
                    });
                    allDatas = allDatas.concat(arr);
                });
                var startTime = allDatas[0].x;

                //设置datalabel的间隔,太近则不显示label
                var min = (function() {
                    var d = new Date(allDatas[0].x);
                    d.setMonth(d.getMonth() - 1);
                    return d.getTime();
                })();
                var max = (function() {
                    var d = new Date(allDatas[allDatas.length - 1].x);
                    d.setMonth(d.getMonth() + 1);
                    return d.getTime();
                })();

                var leastInterval = 1000 * 3600 * 24 * 30;
                var interval = (max - min) / 12;
                var chartWidth = allDatas.length > 12 ? (initialWidth / 12) * allDatas.length : null;
                allDatas.forEach(function(item, index) {
                    if (index === 0) return;
                    var diff = item.x - startTime;
                    if (item.isMain) {
                        if (diff > leastInterval) {
                            item.show = true;
                            startTime = item.x;
                        } else {
                            item.show = false;
                        }
                    }
                });








                var lineColor = "#166992";

                var chartStatus = new Highcharts.Chart({
                    chart: {
                        borderRadius: '0',
                        backgroundColor: '#333333', //
                        borderColor: "#998",
                        borderWidth: '0',
                        width: chartWidth,
                        type: 'line',
                        style: {
                            fontFamily: '"Microsoft Yahei", Verdana', // default font
                            fontSize: '11px'
                        },
                        renderTo: oChartId,
                        spacingLeft: 5,
                        spacingRight: 15,
                        spacingTop: 0,
                        spacingBottom: 0,
                        marginBottom: 10,
                        marginTop: 20
                    },
                    colors: [lineColor],
                    tooltip: {
                        hideDelay: 200,
                        shadow: true,
                        backgroundColor: 'rgba(0, 0, 0, 0.75)',
                        style: {
                            color: '#F0F0F0'
                        },
                        // useHTML: true,
                        positioner: function(w, h, point) {
                            var width = chartStatus.plotWidth;
                            var x = point.plotX - w / 4;
                            if (x < 0) {
                                x = point.plotX;
                            } else if (x + w > width) {
                                x = point.plotX - 0.75 * w;
                            }
                            return {
                                x: x,
                                y: point.plotY + 40
                            };
                        },
                        formatter: function() {
                            return this.point.statusTime + "," + this.point.info;
                        }
                    },
                    plotOptions: {
                        line: {
                            animation: false,
                            pointPlacement: 'on',
                            lineWidth: 6,
                            dataLabels: {
                                enabled: true,
                                // backgroundColor: "rgb(240,255,255)",
                                color: "#ccc",
                                useHTML: true,
                                zIndex: 2,
                                formatter: function() {
                                    if (this.point.isMain && this.point.show) {
                                        return '<div class="label-pop">' + this.point.info + "</div>";
                                    } else {
                                        return "";
                                    }
                                }
                            }
                        },
                        series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: function(event) {
                                        var time = this.statusTime;
                                        $rootScope.$broadcast('statusItemClick', time);
                                    }
                                }
                            }
                        }
                    },
                    exporting: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: ""
                    },
                    xAxis: {
                        type: 'datetime',
                        lineColor: lineColor,
                        lineWidth: 8,
                        tickColor: lineColor,
                        gridLineColor: "transparent",
                        gridLineWidth: 1,
                        // tickPosition: "inside",
                        tickLength: 8,
                        tickWidth: 3,
                        crossing: 0,
                        opposite: true,
                        // showFirstLabel: false,
                        tickInterval: interval, // one day
                        min: min,
                        max: max,
                        labels: {
                            formatter: function() {
                                var dt = new Date(this.value);
                                var m = dt.getMonth();
                                if (m % 3 === 0) {
                                    return $filter('date')(dt, 'yyyy-MM');
                                } else {
                                    return "";
                                }
                            },
                            style: {
                                color: '#fff',
                                fontSize: "12"
                            },
                            y: 28 //-13
                        }
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        min: 0,
                        max: 0,
                        gridLineWidth: 0,
                        lineWidth: 0,
                        lineColor: "transparent",
                        gridLineColor: "transparent",
                        tickWidth: 0,
                        labels: {
                            style: {
                                color: 'transparent'
                            }
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    series: [{
                        name: '1',
                        data: allDatas
                    }]
                });
                return chart;
            }
            return initialChart;
        }
    ]);

});
